<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!--Morris Chart CSS -->
    <link rel="stylesheet" href="/static/static/css/morris.css">
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar-->
    <header id="topnav" style="background-color: #1D84DE">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">

                <!-- Logo-->
                <div>
                    <a href="" class="logo" style="margin-top: 10px;display: flex">
                        <img src="../static/static/weathericon/方块.png" style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>
                <!-- End Logo-->

                <div class="menu-extras topbar-custom navbar p-0">

                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">

                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <!-- notification -->


                        <li class="dropdown notification-list list-inline-item">
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                   
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-planet"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-save"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>

                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle nav-link">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </li>
                    </ul>

                </div>
                <!-- end menu-extras -->
                <div class="clearfix"></div>
            </div>
            <!-- end container -->
        </div>
        <!-- end topbar-main -->



        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>
                        

                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>
                                
                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>
                    
                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>
                        
                       
                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
        <!-- end navbar-custom -->
    </header>
    <!-- End Navigation Bar-->

</div>
<!-- header-bg -->

<div class="wrapper">
    <div class="swiper">
        <div class="swiper-wrapper swiper-no-swiping">
            <div class="swiper-slide" style="position: relative">
                <h1 style="position: absolute;left: 50%;top: 50%;color:#fff;transform: translate(-50%,-50%);font-weight: bold;font-size: 55px">
                    天气数据分析可视化
                </h1>
                <img src="https://img.soogif.com/xPCCsTiRgMy1UbEdtxlaKaJUvNs80bgY.gif" alt=""
                     style="width: 100%;height: 100%;object-fit: cover;">
            </div>
            <div class="swiper-slide gl" style="position: relative">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group row">
                                    <label for="" class="col-sm-1 col-form-label">日期选择:</label>
                                    <div class="col-sm-11">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="main" style="width: 100%;height: 90%;position: absolute;top: 55px;left: 0"></div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- end container-fluid -->
</div>
<!-- end wrapper -->

<!-- Footer -->
{#<footer class="footer">#}
{#    Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>#}
{#</footer>#}
<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }
    html {
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
    overflow-y: hidden;
}
</style>
<!-- End Footer -->

<!-- jQuery  -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<!-- Plugins js -->
<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>
<script src="/static/static/js/swiper-bundle.min.js"></script>
<!--Morris Chart-->

<script src="/static/static/js/morris.min.js"></script>
<script src="/static/static/js/raphael.min.js"></script>
<script src="/static/static/js/dashboard.init.js"></script>

<!-- App js -->
<script src="/static/static/js/app.js"></script>

<script src="/static/static/js/echarts.js"></script>
<script src="/static/static/js/china.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script>
    function change(e) {
        window.location.href = '/userApp/index?date=' + e.target.value
    }
</script>
<script>
    var china_chart = echarts.init(document.getElementById('main'));
    var data = {{ dataList | safe }};
    var option = {
        title: {
            x: 'center',
            padding: [100, 0, 0, 0],
            show: true,
            text: "气温地图",
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial',
                fontSize: 25,
                fontStyle: 'normal',
                fontWeight: 'bold',
            }
        },
        tooltip: {
            show: true,
            formatter: '{b}:{c} ℃',
        },
        visualMap: {
            right: 2,
            bottom: 60,
            pieces: [
                {
                    gt: -45, lt: -25, color: "#83c3f1"
                }, {
                    gt: -25, lte: -5, color: "#a4d2ea"
                }, {
                    gt: -5, lte: 10, color: "#cdf3fc"
                },
                {
                    gt: 10, lte: 30, color: "#e0ffff"
                },
                {
                    gt: 20, lte: 30, color: "#e8ffff"
                },
                {
                    gt: 30, lte: 40, color: "#f6ffff"
                }]
        },
        geo: {
            map: 'china',
            label: {
                show: true
            },
            emphasis: { //高亮
                label: { //地图的标签名字
                    show: true
                },
                itemStyle: { //区域样式 hover样式
                    areaColor: 'pink'
                }
            }
        },
        series: [{
            name: '地图',
            type: 'map', //地图
            geoIndex: 0, //映射visualMap 颜色配置
            coordinateSystem: "geo",
            data: data
        }]
    };
    option && china_chart.setOption(option);
    china_chart.on('click', function (params) {
        cityList = [
            {'province': '北京', 'city': ['北京市']},
            {'province': '天津', 'city': ['天津市']},
            {
                'province': '河北',
                'city': ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市',
                    '廊坊市', '衡水市']
            },
            {
                'province': '山西',
                'city': ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市',
                    '吕梁市']
            },
            {
                'province': '内蒙古自治区',
                'city': ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市',
                    '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟']
            },
            {
                'province': '辽宁',
                'city': ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市',
                    '盘锦市', '铁岭市', '朝阳市', '葫芦岛市']
            },
            {
                'province': '吉林',
                'city': ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延吉市']
            },
            {
                'province': '黑龙江',
                'city': ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市',
                    '牡丹江市', '黑河市', '绥化市',
                    '大兴安岭地区']
            },
            {'province': '上海', 'city': ['上海市']},
            {
                'province': '江苏',
                'city': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市',
                    '镇江市', '泰州市', '宿迁市']
            },
            {
                'province': '浙江',
                'city': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市',
                    '丽水市']
            },
            {
                'province': '安徽',
                'city': ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市',
                    '阜阳市', '宿州市', '六安市', '亳州市',
                    '巢湖市', '池州市', '宣城市']
            },
            {
                'province': '福建',
                'city': ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市']
            },
            {
                'province': '江西',
                'city': ['南昌市', '景德镇市', '萍乡市', '新余市', '九江市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市',
                    '上饶市']
            },
            {
                'province': '山东',
                'city': ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市',
                    '日照市', '莱芜市', '临沂市', '德州市',
                    '聊城市', '滨州市', '荷泽市']
            },
            {
                'province': '河南',
                'city': ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市',
                    '许昌市', '漯河市', '三门峡市', '南阳市',
                    '商丘市', '信阳市', '周口市', '驻马店市']
            },
            {
                'province': '湖北',
                'city': ['武汉市', '黄石市', '十堰市', '宜昌市', '襄阳市', '荆州市', '荆门市', '鄂州市', '孝感市', '黄冈市',
                    '咸宁市', '随州市', '恩施市', '仙桃市',
                    '天门市', '潜江市', '神农架林区']
            },
            {
                'province': '湖南',
                'city': ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市',
                    '永州市', '怀化市', '娄底市', '吉首市', '湘西']
            },
            {
                'province': '广东',
                'city': ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市',
                    '惠州市', '梅州市', '汕尾市', '河源市',
                    '阳江市', '清远市', '东莞市', '中山市', '东沙群岛', '潮州市', '揭阳市', '云浮市']
            },
            {
                'province': '广西',
                'city': ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市',
                    '河池市', '来宾市', '崇左市', '防城港市']
            },
            {
                'province': '海南',
                'city': ['海口市', '三亚市', '三沙市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '安定县',
                    '屯昌县', '澄迈县', '临高县', '白沙',
                    '昌江', '乐东', '陵水', '保亭', '琼中']
            },
            {'province': '重庆', 'city': ['重庆市']},
            {
                'province': '四川',
                'city': ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市',
                    '南充市', '眉山市', '宜宾市', '广安市',
                    '达州市', '雅安市', '巴中市', '资阳市', '阿坝', '甘孜', '凉山',]
            },
            {
                'province': '贵州',
                'city': ['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁市', '黔西南', '毕节市', '黔东南', '黔南']
            },
            {
                'province': '云南',
                'city': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '普洱市', '临沧市', '楚雄', '文山',
                    '西双版纳', '大理', '德宏', '怒江', '迪庆']
            },
            {
                'province': '西藏',
                'city': ['拉萨市', '昌都地区', '山南地区', '日喀则地区', '那曲地区', '阿里地区', '林芝地区']
            },
            {
                'province': '陕西',
                'city': ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市']
            },
            {
                'province': '甘肃',
                'city': ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市',
                    '定西市', '陇南市', '临夏', '甘南']
            },
            {'province': '青海', 'city': ['西宁市', '海乐市', '海北', '黄南', '海南', '果洛', '玉树', '海西']},
            {'province': '宁夏', 'city': ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市',]},
            {
                'province': '新疆',
                'city': ['乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉', '博尔塔拉', '巴音郭楞', '阿克苏地区',
                    '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁',
                    '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔地区', '图木舒克市', '五家渠市',]
            },
            {
                'province': '台湾',
                'city': ['台北市', '高雄市', '台南市', '台中市', '金门县', '南投县', '基隆市', '新竹市', '嘉义市', '新北市',
                    '宜兰县', '新竹县', '桃园县', '苗粟县',
                    '彰化县', '嘉义县', '云林县', '屏东县', '台东县', '花莲县', '澎湖县', '连江县']
            },
            {'province': '香港', 'city': ['香港岛', '新界']},
            {'province': '澳门', 'city': ['澳门', '离岛']},

        ]
        cityList.forEach(item => {
            if (item.province.search(params.data.name) != -1) {
                window.location.href = '/myApp/cityChar?city=' + item.city[0].replace('市', '')
            }
        })
    })
</script>
<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'vertical',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
    })
</script>
</body>

</html>